<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="com.mytrip.model.Trip" import="com.mytrip.model.TripPlan" import="com.mytrip.model.TripPlanFlight" import="com.mytrip.model.TripPlanHotel" import="com.mytrip.model.TripPlanMeeting" import="com.mytrip.model.TripPlanNote"%>
<%@page import="java.util.*" import="java.text.SimpleDateFormat"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>出发吧</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:include page="/common/include_js.jsp" />
<link rel="stylesheet" type="text/css" media="all" href="<%=request.getContextPath() %>/front/css/css.css" />
<style type="text/css">
.nonDisplay{display:none;}
.icoDiv{width:30px;height:30px;overflow:hidden;position:relative;}
.icoDiv img{position:absolute;top:0;left:0;}
.air_icoDiv{margin:-60px 0 0 0;}
.res_icoDiv{margin:-300px 0 0 0;}
.meeting_icoDiv{margin:-360px 0 0 0;}
.note_icoDiv{margin:-510px 0 0 0;}
</style>
</head>
<body>
<div id="wrap" style="width:680px;">

  <div id="main">
    <div id="main_left" style="width:97%;">
      
	  <%
	  	SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
	  	Trip trip = (Trip)request.getAttribute("trip");
	  	Date startDate = trip.getStartDate();
	  	Date endDate = trip.getEndDate();
	  %>
      
      <div class="colWdt4-3" id="planListDiv">
        <div class="fLt" id="_trip_photo"> <a href="#"><img src="<%=request.getContextPath() %>/front/images/general.jpg" id="display_image" alt="Your trip" class="photoFrame"></a></div>
        <div class="fLt dubHMrgL" style="width:320px;">
          <h1 id="_trip_info"><%=trip.getName() %>&nbsp;(<%=trip.getFromCityStr()%> ~ <%=trip.getToCityStr()%>)&nbsp;<span style="color:red;"><%if(!"1".equals(trip.getIsPublic())){out.print("私有行程");}%></span></h1>
          <div id="_trip_date"><%=sdf.format(trip.getStartDate())%> ~ <%=sdf.format(trip.getEndDate()) %></div>
        </div>
        <div id="selectOpt" style="float:right;width:150px;height:180px;padding:5px;border:1px solid #000;margin-bottom:5px;">
        	<span style="font-weight:bold;">选择需要打印的内容</span><br/>
        	<span style="color:#BBB;">(打印时自动隐藏)</span><br/>
        	<input type="checkbox" checked="checked" onclick="javascript:toggleHidden('_trip_photo');" />&nbsp;行程图片<br/>
        	<input type="checkbox" checked="checked" onclick="javascript:toggleHidden('_trip_info');" />&nbsp;行程信息<br/>
        	<input type="checkbox" checked="checked" onclick="javascript:toggleHidden('_trip_date');" />&nbsp;行程时间<br/>
        	<input type="checkbox" checked="checked" onclick="javascript:$$('div[id^=trip_day_]').each(function(e){var d=e.getStyle('display');e.setStyle('display',d==='block'?'none':'block');});" />&nbsp;计划列表<br/>
          	<a href="javascript:void(0);" onclick="javascript:startPrint();" class="btn_std"><img  src="<%=request.getContextPath() %>/front/images/printer.gif" /> 打印行程</a>
          </div>
        <div class="clrBr"></div>
        
      </div>
    </div>
    
  </div>
  
  <div id="footer"></div>
</div>

<!-- template -->
<div class="trip_day" id="planDateTpl_day" style="border-top:1px solid #4d9fd5;display:none;">
  <div class="bgBlu TripPad">
    <div class="fLt" style="width:150px">2011年11月6日</div>
    <div style="width: 350px;" class="fLt"> </div>
  </div>
</div>

<div class="trip_item blue" id="planDateTpl_flight" rel="" style="display:none;">
	<div class="bgWht">
		<div class="wht">
			<div class="fLt ">
				<h1><a href="javascript:void(0);">航班(出发)</a></h1>
			</div>
        </div>
        <div class="hlfVPad">
        	<table cellpadding="0" cellspacing="0" style="width:500px;">
				<tr style="height:30px;">
					<td style="width:100px;">航空公司</td>
					<td style="width:150px;">1</td>
					<td style="width:100px;">航班号</td>
					<td style="width:150px;">2</td>
				</tr>
				<tr style="height:30px;">
					<td>起飞时间</td>
					<td>3</td>
					<td>到达时间</td>
					<td>4</td>
				</tr>
			</table>
        </div>
        <div class="itemimg Dtime"><div class="fLt icoDiv"><img class="air_icoDiv" src="<%=request.getContextPath() %>/front/images/sprites-itin.png" /></div><span class="_plan_time">13:00</span></div>
	</div>
</div>


<div class="trip_item blue" id="planDateTpl_flight2" rel="" style="display:none;">
	<div class="bgWht">
		<div class="wht">
			<div class="fLt ">
				<h1><a href="javascript:void(0);">航班(到达)</a></h1>
			</div>
        </div>
        <div class="hlfVPad">
        	<table cellpadding="0" cellspacing="0" style="width:500px;">
				<tr style="height:30px;">
					<td style="width:100px;">航空公司</td>
					<td style="width:150px;">1</td>
					<td style="width:100px;">航班号</td>
					<td style="width:150px;">2</td>
				</tr>
				<tr style="height:30px;">
					<td>起飞时间</td>
					<td>3</td>
					<td>到达时间</td>
					<td>4</td>
				</tr>
			</table>
        </div>
        <div class="itemimg Dtime"><div class="fLt icoDiv"><img class="air_icoDiv" src="<%=request.getContextPath() %>/front/images/sprites-itin.png" /></div><span class="_plan_time">13:00</span></div>
	</div>
</div>

<div class="trip_item blue" id="planDateTpl_hotel" rel="" style="display:none;">
	<div class="bgWht">
		<div class="wht">
			<div class="fLt ">
				<h1><a href="javascript:void(0);">酒店(入住)</a></h1>
			</div>
		</div>
		<div class="hlfVPad">
			<table cellpadding="0" cellspacing="0" style="width:500px;">
				<tr style="height:30px;">
					<td style="width:100px;">酒店名称</td>
					<td style="width:150px;">1</td>
					<td style="width:100px;">房间名称</td>
					<td style="width:150px;">2</td>
				</tr>
				<tr style="height:30px;">
					<td style="width:100px;">酒店地址</td>
					<td style="width:400px;" colspan="3">3</td>
				</tr>
				<tr style="height:30px;">
					<td>入住时间</td>
					<td>4</td>
					<td>离开时间</td>
					<td>5</td>
				</tr>
			</table>
        </div>
        <div class="itemimg Dtime"><div class="fLt icoDiv"><img class="res_icoDiv" src="<%=request.getContextPath() %>/front/images/sprites-itin.png" /></div><span class="_plan_time">13:00</span></div>
	</div>
</div>

<div class="trip_item blue" id="planDateTpl_hotel2" rel="" style="display:none;">
	<div class="bgWht">
		<div class="wht">
			<div class="fLt ">
				<h1><a href="javascript:void(0);">酒店(离开)</a></h1>
			</div>
		</div>
		<div class="hlfVPad">
			<table cellpadding="0" cellspacing="0" style="width:500px;">
				<tr style="height:30px;">
					<td style="width:100px;">酒店名称</td>
					<td style="width:150px;">1</td>
					<td style="width:100px;">房间名称</td>
					<td style="width:150px;">2</td>
				</tr>
				<tr style="height:30px;">
					<td style="width:100px;">酒店地址</td>
					<td style="width:400px;" colspan="3">3</td>
				</tr>
				<tr style="height:30px;">
					<td>入住时间</td>
					<td>4</td>
					<td>离开时间</td>
					<td>5</td>
				</tr>
			</table>
        </div>
        <div class="itemimg Dtime"><div class="fLt icoDiv"><img class="res_icoDiv" src="<%=request.getContextPath() %>/front/images/sprites-itin.png" /></div><span class="_plan_time">13:00</span></div>
	</div>
</div>

<div class="trip_item blue" id="planDateTpl_hotel_during" rel="" style="display:none;">
	<div class="bgWht">
		<div class="wht">
			<div class="fLt ">
				<h1><a href="javascript:void(0);">酒店</a></h1>
			</div>
			<div class="fRt TripPad"><a class="_plan_del" href="javascript:void(0);">删除</a></div>
		</div>
		<div class="hlfVPad">
			<table cellpadding="0" cellspacing="0" style="width:500px;">
				<tr style="height:30px;">
					<td style="width:100px;">酒店名称</td>
					<td style="width:150px;">1</td>
					<td style="width:100px;">房间名称</td>
					<td style="width:150px;">2</td>
				</tr>
				<tr style="height:30px;">
					<td style="width:100px;">酒店地址</td>
					<td style="width:400px;" colspan="3">3</td>
				</tr>
				<tr style="height:30px;">
					<td>入住时间</td>
					<td>4</td>
					<td>离开时间</td>
					<td>5</td>
				</tr>
			</table>
        </div>
        <div class="itemimg Dtime"><img width="31" height="30" src="<%=request.getContextPath() %>/front/images/clear.gif" class=" fLt ico res_ico" alt=""><span class="_plan_time">13:00</span></div>
	</div>
</div>

<div class="trip_item gray" id="planDateTpl_meeting" rel="" style="display:none;">
	<div class="bgWht">
		<div class="wht">
			<div class="fLt ">
				<h1><a href="javascript:void(0);">会议</a></h1>
			</div>
		</div>
		<div class="hlfVPad">
			<table cellpadding="0" cellspacing="0" style="width:500px;">
				<tr style="height:30px;">
					<td style="width:100px;">会议时间</td>
					<td style="width:400px;">1</td>
				</tr>
				<tr>
					<td>会议内容</td>
					<td>2</td>
				</tr>
			</table>
		</div>
		<div class="itemimg Dtime"><div class="fLt icoDiv"><img class="meeting_icoDiv" src="<%=request.getContextPath() %>/front/images/sprites-itin.png" /></div><span class="_plan_time">13:00</span></div>
	</div>
</div>

<div class="trip_item yellow" id="planDateTpl_note" rel="" style="display:none;">
	<div class="bgWht">
		<div class="wht">
			<div class="fLt ">
				<h1><a href="javascript:void(0);">记录</a></h1>
			</div>
		</div>
		<div class="hlfVPad">
			<table cellpadding="0" cellspacing="0" style="width:500px;">
				<tr style="height:30px;">
					<td style="width:100px;">记录时间</td>
					<td style="width:400px;">1</td>
				</tr>
				<tr>
					<td>记录内容</td>
					<td>2</td>
				</tr>
			</table>
		</div>
		<div class="itemimg Dtime"><div class="fLt icoDiv"><img class="note_icoDiv" src="<%=request.getContextPath() %>/front/images/sprites-itin.png" /></div><span class="_plan_time">13:00</span></div>
	</div>
</div>

<script type='text/javascript' src='<%=request.getContextPath() %>/dwr/interface/frontTripAction.js'></script>
<script type="text/javascript">
	var planListDiv=$('planListDiv');
	
	var genDay=function(a){
		var ymd=a[0]+a[1]+a[2];
		var dayId='trip_day_'+ymd;
		var day=planListDiv.getElement('#'+dayId);
		if(!day){
			day=$('planDateTpl_day').clone();
			day.set('id',dayId);
			day.setStyle('display','block');
			day.getElements('.fLt')[0].set('html',a[0]+'年'+a[1]+'月'+a[2]+'日');
			
			// inject
			var tf=0;
			var days=planListDiv.getElements('.trip_day');
			for(var i=0;i<days.length;i++){
				if(days[i].get('id')>dayId){
					day.inject(days[i],'before');
					tf=1;
					break;
				}
			}
			if(!tf){
				day.inject(planListDiv,'bottom');
			}
		}
		
		return day;
	}
	
	var genPlan=function(day,a,b,pid,type){
		var ymd=a[0]+a[1]+a[2];
		var hs=b[0]+b[1];
		
		var planId='trip_plan_'+ymd+'_'+hs+'_'+type+'_'+pid;
		var plan=$('planDateTpl_'+type).clone();
		plan.set('id',planId);
		plan.set('rel','p_'+pid);
		plan.setStyle('display','block');
		plan.getElement('._plan_time').set('html',b[0]+':'+b[1]+'&nbsp;'+(b[0]>=12?'PM':'AM'));
		
		// inject
		var tf=0;
		var dayPlans=day.getElements('.trip_item');
		for(var i=0;i<dayPlans.length;i++){
			if(dayPlans[i].get('id')>planId){
				plan.inject(dayPlans[i],'before');
				tf=1;
				break;
			}
			// last element
			if(i==dayPlans.length-1){
				plan.inject(dayPlans[i],'after');
				tf=1;
			}
		}
		if(!tf){
			plan.inject(day,'bottom');
		}
		
		return plan;
	}
	
	var renderPage_flight=function(pid, flight_time, arrive_time, airline, flight_number){
		// flight_time
		var a=flight_time.split(' ')[0].split('-');
		var b=flight_time.split(' ')[1].split(':');
		var day=genDay(a);
		var plan=genPlan(day,a,b,pid,'flight');

		// data
		var tbl=plan.getElement('table');
		tbl.getChildren()[0].getChildren()[0].getChildren()[1].set('html',airline);
		tbl.getChildren()[0].getChildren()[0].getChildren()[3].set('html',flight_number);
		tbl.getChildren()[0].getChildren()[1].getChildren()[1].set('html',flight_time);
		tbl.getChildren()[0].getChildren()[1].getChildren()[3].set('html',arrive_time);
		
		// arrive_time
		var c=arrive_time.split(' ')[0].split('-');
		var d=arrive_time.split(' ')[1].split(':');
		var day2=genDay(c);
		var plan2=genPlan(day2,c,d,pid,'flight2');

		// data
		var tbl2=plan2.getElement('table');
		tbl2.getChildren()[0].getChildren()[0].getChildren()[1].set('html',airline);
		tbl2.getChildren()[0].getChildren()[0].getChildren()[3].set('html',flight_number);
		tbl2.getChildren()[0].getChildren()[1].getChildren()[1].set('html',flight_time);
		tbl2.getChildren()[0].getChildren()[1].getChildren()[3].set('html',arrive_time);
	}
	
	var renderPage_hotel=function(pid, check_in_time, check_out_time, address, telephone, hotel_name){
		// check_in_time
		var a=check_in_time.split(' ')[0].split('-');
		var b=check_in_time.split(' ')[1].split(':');
		var day=genDay(a);
		var plan=genPlan(day,a,b,pid,'hotel');

		// data
		var tbl=plan.getElement('table');
		tbl.getChildren()[0].getChildren()[0].getChildren()[1].set('html',hotel_name);
		tbl.getChildren()[0].getChildren()[0].getChildren()[3].set('html',telephone);
		tbl.getChildren()[0].getChildren()[1].getChildren()[1].set('html',address);
		tbl.getChildren()[0].getChildren()[2].getChildren()[1].set('html',check_in_time);
		tbl.getChildren()[0].getChildren()[2].getChildren()[3].set('html',check_out_time);
		
		// check_out_time
		var c=check_out_time.split(' ')[0].split('-');
		var d=check_out_time.split(' ')[1].split(':');
		var day2=genDay(c);
		var plan2=genPlan(day2,c,d,pid,'hotel2');

		// data
		var tbl2=plan2.getElement('table');
		tbl2.getChildren()[0].getChildren()[0].getChildren()[1].set('html',hotel_name);
		tbl2.getChildren()[0].getChildren()[0].getChildren()[3].set('html',telephone);
		tbl2.getChildren()[0].getChildren()[1].getChildren()[1].set('html',address);
		tbl2.getChildren()[0].getChildren()[2].getChildren()[1].set('html',check_in_time);
		tbl2.getChildren()[0].getChildren()[2].getChildren()[3].set('html',check_out_time);
		
		// during
		var sDate=new Date();
		sDate.setFullYear(a[0],a[1],a[2]);
		sDate.setDate(sDate.getDate()+1);
		var eDate=new Date();
		eDate.setFullYear(c[0],c[1],c[2]);
		eDate.setDate(eDate.getDate());
		
		while(sDate<eDate){
			var _y=sDate.getFullYear()+'';
			var _m=sDate.getMonth();
			_m=_m<10?'0'+_m:''+_m;
			var _d=sDate.getDate();
			_d=_d<10?'0'+_d:''+_d;
			var e=[_y,_m,_d];
			var f=['00','00'];
			var _day=genDay(e);
			var _plan=genPlan(_day,e,f,pid,'hotel_during');
	
			// data
			var _tbl=_plan.getElement('table');
			_tbl.getChildren()[0].getChildren()[0].getChildren()[1].set('html',hotel_name);
			_tbl.getChildren()[0].getChildren()[0].getChildren()[3].set('html',telephone);
			_tbl.getChildren()[0].getChildren()[1].getChildren()[1].set('html',address);
			_tbl.getChildren()[0].getChildren()[2].getChildren()[1].set('html',check_in_time);
			_tbl.getChildren()[0].getChildren()[2].getChildren()[3].set('html',check_out_time);
			
			sDate.setDate(sDate.getDate()+1);
		}
	}
	
	var renderPage_meeting=function(pid, meeting_time, meeting_info){
		var a=meeting_time.split(' ')[0].split('-');
		var b=meeting_time.split(' ')[1].split(':');
		var day=genDay(a);
		var plan=genPlan(day,a,b,pid,'meeting');

		// data
		var tbl=plan.getElement('table');
		tbl.getChildren()[0].getChildren()[0].getChildren()[1].set('html',meeting_time);
		tbl.getChildren()[0].getChildren()[1].getChildren()[1].set('html',meeting_info);
	}
	
	var renderPage_note=function(pid, note, note_time){
		var a=note_time.split(' ')[0].split('-');
		var b=note_time.split(' ')[1].split(':');
		var day=genDay(a);
		var plan=genPlan(day,a,b,pid,'note');

		// data
		var tbl=plan.getElement('table');
		tbl.getChildren()[0].getChildren()[0].getChildren()[1].set('html',note_time);
		tbl.getChildren()[0].getChildren()[1].getChildren()[1].set('html',note);
	}
	
	// gen days
<%
	Calendar startCal = Calendar.getInstance();
	startCal.setTime(startDate);
	Calendar endCal = Calendar.getInstance();
	endCal.setTime(endDate);
	endCal.add(Calendar.DATE,1);
	
	while(startCal.before(endCal)){
		String[] _s = sdf.format(startCal.getTime()).split("-");
%>
	genDay(['<%=_s[0]%>','<%=_s[1]%>','<%=_s[2]%>']);
<%
		startCal.add(Calendar.DATE,1);
	}
%>
	
	// planList
<%
	List<TripPlan> planList = (List<TripPlan>)request.getAttribute("planList");
	SimpleDateFormat sdf2 = new SimpleDateFormat("yyyy-MM-dd HH:mm");
	
	for(TripPlan plan : planList){
		String type = plan.getType();
		if(TripPlan.TYPE_FLIGHT.equals(type)){
			TripPlanFlight flight = plan.getFlight();
%>
	renderPage_flight('<%=plan.getId()%>','<%=sdf2.format(flight.getFlightTime())%>','<%=sdf2.format(flight.getArriveTime())%>','<%=flight.getAirline()%>','<%=flight.getFlightNumber()%>');
<%
		}else if(TripPlan.TYPE_HOTEL.equals(type)){
			TripPlanHotel hotel = plan.getHotel();
%>
	renderPage_hotel('<%=plan.getId()%>','<%=sdf2.format(hotel.getCheckInTime())%>','<%=sdf2.format(hotel.getCheckOutTime())%>','<%=hotel.getAddress()%>','<%=hotel.getRoomName()%>','<%=hotel.getHotelName()%>');
<%
		}else if(TripPlan.TYPE_MEETING.equals(type)){
			TripPlanMeeting meeting = plan.getMeeting();
%>
	renderPage_meeting('<%=plan.getId()%>','<%=sdf2.format(meeting.getMeetingTime())%>','<%=meeting.getMeetingInfo()%>');
<%
		}else if(TripPlan.TYPE_NOTE.equals(type)){
			TripPlanNote note = plan.getNote();
%>
	renderPage_note('<%=plan.getId()%>','<%=note.getNote()%>','<%=sdf2.format(note.getNoteTime())%>');
<%
		}
	}
%>
	var startPrint=function(){
		if(confirm('开始打印?')){
			$('selectOpt').setStyle('display','none');
			window.print();
		}
	};
	
	var toggleHidden=function(id){
		$(id).toggleClass('nonDisplay');
	};
	
	// weather
	frontTripAction.queryCityWeather(<%=trip.getToCity()%>,function(res){
		res=eval('('+res+')');
		if(res&&res.Stat=='OK'){
			var ws=res.Weathers[0].Forecast;
			for(var i=0;i<ws.length;i++){
				var w=ws[i];
				var d=w.Date;
				var _d=new Date(d.substring(6,d.length-7).toInt()+800);
				var _dy=_d.getFullYear();
				var _dm=_d.getMonth()+1;
				_dm=_dm<10?'0'+_dm:''+_dm;
				var _dd=_d.getDate();
				_dd=_dd<10?'0'+_dd:''+_dd;
				var ymd=_dy+_dm+_dd;
				
				var day=planListDiv.getElement('#trip_day_'+ymd);
				if(day){
					day.getElements('.fLt')[1].set('html',w.High+'/'+w.Low+'°C '+w.Text);
				}
			}
		}
	});
	
</script>
</body>
</html>